<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>窗户状态查询</title>
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <link rel="shortcut icon" href="/static/imag/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/body.css">
    <style>
        /* MQTT 连接状态和查询模块 */
        .mqtt-status {
            margin-top: 20px;
            background-color: var(--mqtt-status-bg-color);
            padding: 20px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mqtt-status span {
            font-size: 1.2em;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
        }

        .mqtt-status span::after {
            content: "已连接";
            background-color: #28a745;
            /* 鲜绿色背景 */
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            margin-left: 10px;
            white-space: nowrap;
        }

        .mqtt-status button {
            padding: 10px 20px;
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .mqtt-status button:hover {
            background-color: var(--button-hover-bg-color);
        }

        /* 状态表格样式 */
        .status-table {
            margin-top: 20px;
            background-color: var(--status-table-bg-color);
            border-radius: 8px;
            padding: 20px;
            color: #fff;
            width: 80%;
            /* 缩小表格宽度 */
            margin-left: auto;
            margin-right: auto;
        }

        .status-table h2 {
            margin-bottom: 15px;
            color: var(--sidebar-heading-color);
            display: flex;
            align-items: center;
        }

        .status-table h2 .search-button {
            margin-left: 20px;
            padding: 8px 15px;
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: var(--text-color);
        }

        .status-table h2 .search-button:hover {
            background-color: var(--button-hover-bg-color);
        }

        .status-table h2 .filter-button {
            margin-left: 10px;
            padding: 8px 15px;
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: var(--text-color);
        }

        .status-table h2 .filter-button:hover {
            background-color: var(--button-hover-bg-color);
        }

        .status-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .status-table table th,
        .status-table table td {
            padding: 12px;
            border: 1px solid #fff;
            text-align: center;
        }

        .status-table table th {
            background-color: var(--table-header-bg-color);
            font-weight: bold;
        }

        .status-table table td {
            background-color: var(--table-cell-bg-color);
        }

        .status-table table td.closed {
            color: var(--closed-color);
            /* 绿色表示已关闭 */
        }

        .status-table table td.open {
            color: var(--open-color);
            /* 红色表示未关闭 */
        }
    </style>
</head>

<body onload="connect()">
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h2>导航栏</h2>
            <a href="#" onclick="go_back()">返回首页</a>
            <a href="#" onclick="open_win()">窗户状态</a>
            <a href="#" onclick="open_msg()">通知中心</a>
            <a href="#" onclick="open_ai_chat()">ai聊天</a>
            <a href="#" onclick="open_audio()">语音提醒</a>
            <a href="#" onclick="open_lost_and_found()">失物招领中心</a>
            <a href="#" onclick="open_car_video()">小车视频</a>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <img src="./static/imag/logo.png" alt="Logo" class="logo" title="点击切换主题" id="logo_switchTheme">
                <h1>窗户状态</h1>
                <div class="user-info">
                    <img src="./static/imag/adm.jpg" alt="User Avatar">
                    <div class="invite-code-popup">
                        用户: <span id="uname">{{.username}}</span>
                        <br>邀请码: {{.invitecode}}(禁止外传)
                    </div>
                    <div class="username">用户: {{.username}}</div>
                    <button class="logout-button" onclick="logout()">退出登录</button>
                </div>
            </div>

            <!-- MQTT连接状态和查询模块 -->
            <div class="mqtt-status">
                <span>MQTT连接状态: </span>
                <button>重新连接</button>
            </div>

            <!-- 各班级窗口状态表格 -->
            <div class="status-table">
                <h2>
                    各班级窗户状态
                    <button class="search-button" id="search_button">查询</button>
                    <button class="filter-button" id="sort">筛选</button>
                </h2>
                <table>
                    <thead>
                        <tr>
                            <th>楼层信息</th>
                            <th>班级</th>
                            <th>窗户状态</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        {{range .classes}}
                        <tr>
                            <td>{{.Class_pos}}</td>
                            <td>{{.Class_name}}</td>
                            <td id="{{.Class_num}}">-</td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
        多模态智能校园管理平台
    </div>
    <script src="/static/js/route.js"></script>
    <script src="/static/js/win_st_q.js"></script>
</body>

</html>